<template>
    <div>
        <m-table :columns="columns" :data="data" :title="$route.meta?.title" :api="api">
            <template #button>
                <a-button type="primary" size="small" @click="handleAdd">新增</a-button>
            </template>
            <template #autoIncrement="{ record }">
                <a-tag :color="record.autoIncrement == 1 ? 'blue' : 'green'">
                    {{ record.autoIncrement == 1 ? '是' : '否' }}
                </a-tag>
            </template>

            <template #DATA_LENGTH="{ record }">
                <!-- 转 MB -->
                {{ (record.DATA_LENGTH / 1024 ).toFixed(2) }} KB
            </template>



            <template #action="{ record }">
                <a-space>
                    <a-button size="small">详情</a-button>
                    <a-button size="small" @click="fieldsPopover?.open(record.TABLE_NAME)">字段</a-button>
                    <a-button type="primary" size="small">编辑</a-button>

                </a-space>
            </template>
        </m-table>


        <!-- 字段设置 -->
        <fields-popover ref="fieldsPopover" />
    </div>
</template>

<script setup lang="ts">
import FieldsPopover from './components/fields.vue'
import request from '@/utils/request'
const api = (params?: any) => request.get({ url: '/adminapi/system.setting.database/get_table_list', params: { ...params } })
const fieldsPopover = ref<InstanceType<typeof FieldsPopover>>()
const columns = [
    {
        title: '表名称',
        dataIndex: 'TABLE_NAME',
    }, {
        title: '自动递增',
        dataIndex: 'AUTO_INCREMENT',
        align: 'center',
        width: 100,
    }, {
        title: '修改日期',
        dataIndex: 'UPDATE_TIME',
        align: 'center',
        width: 200,
    }, {
        title: '数据长度',
        dataIndex: 'DATA_LENGTH',
        align: 'center',
        width: 100,
    }, {
        title: '引擎',
        dataIndex: 'ENGINE',
        align: 'center',
        width: 100,
    }, {
        title: '行',
        dataIndex: 'TABLE_ROWS',
        align: 'center',
        width: 100,
    }, {
        title: '注释',
        dataIndex: 'TABLE_COMMENT',
    }, {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 100,
    }
]

const data = {
    lists: [
        {
            table_name: 'matrix_admin',
            autoIncrement: 1,
            updateDate: '2021-01-01',
            dataLength: 6558815,
            engine: 'InnoDB',
            rows: '100',
            comment: '管理员表',
        },
    ],
    total: 2,
    page: 1,
    pageSize: 10,
}



</script>
